Probablemente estaré destrozado por esta pregunta, pero aquí vamos.
Todos hemos visto lo terrible:
Refused to apply style from <URL> because its MIME type <TYPE> is not a supported stylesheet MIME type, and strict MIME checking is enabled.Su origen y solución suelen estar orientados a proyectos, e innumerables respuestas en StackOverflow ofrecen innumerables soluciones, muchas de las cuales no se pueden aplicar de forma genérica. Aquí hay una situación peculiar, que parece que no puedo entender, dado que trabajo principalmente en el back-end:
<link type="text/css" rel="stylesheet" th:href="@{/real-fun/css/stylesheet.css}"> <link type="stylesheet/css" rel="stylesheet" th:href="@{/real-fun/css/tail.select-light.css}"> Estoy usando Thymeleaf como el motor de renderizado de plantillas/del lado del servidor elegido. Si bien no es perfecto, hace el trabajo por mí, por lo tanto, los atributos th:href en lugar de los normales y la sintaxis @{} .
Aquí está la cuestión: el primer archivo debe cargarse como "text/css" , de lo contrario, el navegador se niega a aplicar su estilo, mientras que el segundo archivo debe cargarse como "stylesheet/css" , de lo contrario, el navegador lo bloquea.
En ambos casos, afirma que los archivos son del tipo "application/json" , y ninguno lo es.
En este escenario, el primero no se cargará, pero el segundo sí:
<link type="stylesheet/css" rel="stylesheet" th:href="..."> <link type="stylesheet/css" rel="stylesheet" th:href="...">En este escenario, el segundo no se cargará, pero el primero sí:
<link type="text/css" rel="stylesheet" th:href="..."> <link type="text/css" rel="stylesheet" th:href="...">¿Qué da y cómo averiguo qué tipo de MIME se espera antes de que el navegador reciba un trazo?
Entonces, no tengo idea de por qué o cómo esto arregló algo, pero lo hizo.
Había un archivo, denominado tail-select.js , que importaba tail.select.js . Estos son dos archivos distintos y tail.select.js es el archivo JS real para la biblioteca.
Aunque tail.select.js no dependía de tail-select.js , esta importación lo afectó de alguna manera . Después de eliminar el archivo tail-select.js , que parece haberse introducido erróneamente en el proyecto, el archivo CSS se carga correctamente, a través de rel="text/css" .
No entiendo cómo un archivo JS externo que importa otro archivo y no hace nada con él logró romper el archivo importado y, además, cómo esto cambió la forma en que se carga el archivo CSS. Sin embargo, (de alguna manera) está funcionando ahora y tengo miedo de hacer más preguntas.